<template>
    <div class="person">
        <!-- v-bind:只能从数据->页面，v-model:双向绑定 -->
        姓:<input type="text" name="" id="" v-model="firstName"><br>
        名:<input type="text" name="" id="" v-model="lastName"><br>
        <button @click="changeFullName">将全名改为li-si</button>
        全名:<span>{{ fullName }}</span><br>
    </div>
</template>

<script lang="ts">
//vue2中的替换属性
export default {
    computed: {}
}
</script>

<script setup lang="ts" name="Person">
import {ref, computed} from 'vue'

let firstName = ref('张')
let lastName = ref('三')

/*//这么定义的fullName是一个计算属性，且是只读的
let fullName = computed(() => {
    console.log(1)
    return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
})

/!*function changeFullName() {
    //此时这个fullName不可写
    fullName.value=''
    console.log(fullName.value)
}*!/*/

let fullName = computed({
    get() {
        return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    },
    set(val) {
        const [str1, str2] = val.split('-')
        firstName.value = str1
        lastName.value = str2
        console.log('set', val)
    }
})

function changeFullName() {
    //此时这个fullName可写
    fullName.value = 'li-si'
    console.log(fullName.value)
}
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li {
    font-size: 20px;
}
</style>